table {
    border-collapse: separated;
}

td {
    position: relative;
    width: 20px;
    height: 20px;
    text-align: center;
    background: #ccc;
}

td.open {
    background-color: white;
}

td .flag {
    position: absolute;
    left: 2px;
    top: 2px;
    height: 18px;
    width: 18px;
    background-image: url('flag.png');
    background-repeat: no-repeat;
    background-size: 18px;
    animation: flag 0.3s;
}


/*标记旗子动画*/

@keyframes flag {
    0% {
        transform: scale(2)
    }
    100% {
        transform: scale(1)
    }
}

.dragBar {
    width:100px;
    padding-top:5px;
    .line{
        position: relative;
        height: 4px;
        width:100px;
        border:1px solid black;
        border-radius:3px;
        .circle{
            position: relative;
            top:-4px;
            height:10px;
            width:10px;
            background-color: #999;
            border:1px solid black;
            border-radius: 6px;
        }
    }
}